<!-- 个人中心 -->
<template>
	<view class="contain">
        <view class="top">
			<view class="top1">
				<view class="item1"></view>
				<view class="item2">
					<view class="dengji">TOP2</view>
				</view>
				<view class="item3">{{top2.username?top2.username:"无"}}</view>
				<view style="display: flex;font-size: 28rpx;margin-top: 18rpx;">
					<view>收益：</view>
					<view>{{top2.profit_money?top2.profit_money:"0.00"}}</view>
				</view>
				<view class="time">{{top2.createtime?top2.createtime:"无"}}</view>
			</view>
			<view class="top2">
				<view class="itemimg"></view>
				<view class="item2">
					<view class="dengji">TOP1</view>
				</view>
				<view class="item3">{{top1.username?top1.username:"无"}}</view>
				<view style="display: flex;font-size: 28rpx;margin-top: 18rpx;">
					<view>收益：</view>
					<view>{{top1.profit_money?top1.profit_money:"0.00"}}</view>
				</view>
				<view class="time">{{top1.createtime?top1.createtime:"无"}}</view>
			</view>
			<view class="top3">
				<view class="item1"></view>
				<view class="item2">
					<view class="dengji">TOP3</view>
				</view>
				<view class="item3">{{top3.username?top3.username:"无"}}</view>
				<view style="display: flex;font-size: 28rpx;margin-top: 18rpx;">
					<view>收益：</view>
					<view>{{top3.profit_money?top3.profit_money:"0.00"}}</view>
				</view>
				<view class="time">{{top3.createtime?top3.createtime:"无"}}</view>
			</view>
        </view>
		<view class="bot" v-if="top4All.length>0">
			<view class="item"  v-for="(item,index) in top4All">
				<view style="display: flex;flex: 1;align-items: center;">
				<view class="four">{{4+index}}</view>
				<view style="margin-left: 27rpx;"><image style="width: 75rpx;height: 75rpx;" src="../../static/image/fenxiao5.png"></image></view>
				<view style="margin-left: 18rpx;">
					<view class="bot_name">{{item.username?item.username:"无"}}</view>
					<view class="bot_time">{{item.createtime?item.createtime:"无"}}</view>
				</view>
				</view>
				<view>
					<view class="ling">{{item.profit_money?item.profit_money:"0.00"}}</view>
					<view class="shouyi">累计收益</view>
				</view>
			</view>
	
		</view>
		<view class="wu">
			<view class="hengxian"></view>
			<view class="gengduo">没有更多了</view>
			<view class="hengxian"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			type: 'top',
            top1:{},
            top2:{},
            top3:{},
            top4All:[]
			};
		},
        onLoad() {
            this.getData()
        },

		methods: {
			getData(){
				let that=this
                var top1={}
                var top2={}
                var top3={}
                var top4All=[]
			    that.$api.profitOrder({
			    }).then(res => {
			        console.log('res',res)
			        if(res.code ==1){
                        let datas=res.data
                        if(res.data.length>0){
                            datas.forEach((item,index)=>{
                                if(item.createtime!=null){
                                    item.createtime=that.$util.tsFormatTime(item.createtime*1000,"Y年M月D日")
                                }
                                if(index == 0){
                                  
                                      top1=item
                                }
                                if(index == 1){
                                   
                                      top2=item
                                }
                                if(index == 2){
                                  
                                      top3=item
                                }
                                if(index >=3){
                                    
                                    top4All.push(item)
                                }
                            })
                            that.top1=top1
                            that.top2=top2
                            that.top3=top3
                            that.top4All=top4All
                            console.log('11',that.top1,that.top2,that.top3,that.top4All)
                        }
			        }
			    });
			},
		}
	};
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.contain{
		height: 100vh;
		background: #F5F5F5;
		
	}
    .top{
   display: flex;
       justify-content: space-between;
       height: 285px;
       background: #DE2415;
       padding-top: 19px;
       padding-left: 15px;
       padding-right: 15px;
       position: relative;
    }
    .top1{
		margin-right: -20px;
		margin-top: 15px;
		z-index: 1;
		background-size: 100% 100%;
		width: 261rpx;
		height: 383rpx;
		border: 2px solid #fff000;
		border-radius: 15px;
		background-image: linear-gradient(#ff634e, #c32316);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top2{
		background-size: 100% 100%;
		width: 261rpx;
		height: 423rpx;
		border: 2px solid #fff000;
		border-radius: 15px;
		background-image: linear-gradient(#ff634e, #c32316);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top3{
		    margin-left: -20px;
		    margin-top: 15px;
			z-index: 1;
		background-size: 100% 100%;
		width: 261rpx;
		height: 383rpx;
		border: 2px solid #fff000;
		border-radius: 15px;
		background-image: linear-gradient(#ff634e, #c32316);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bot{
		z-index: 999;
		margin-top: -185rpx;
		background: #F5F5F5;
		   border-radius: 48rpx 48rpx 0px 0px;
		   padding: 30rpx;
		   position: relative;
	}
	.item{
		height: 130rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 36rpx;
	}
	.item1{
		background-size: 100% 100%;
		width: 63rpx;
		height: 63rpx;
		background-image: url('/static/image/fenxiao5.png');
		    margin-top: 35rpx;
	}
	.itemimg{
		background-size: 100% 100%;
		width: 90rpx;
		height: 90rpx;
		background-image: url('/static/image/fenxiao5.png');
		    margin-top: 35rpx;
	}
	.item2{
		background-size: 100% 100%;
		width: 112rpx;
		height: 44rpx;
		background-image: url('/static/image/fenxiao52.png');
		 margin-top: 14rpx;
		 text-align: center;
	}
	.dengji{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-style: italic;
		color: #FFFFFF;
	}
	.item3{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		 margin-top: 18rpx;
	}
	.time{
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #68160F;
		line-height: 29px;
		opacity: 0.7;
		
	}
	.four{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-style: italic;
		color: #333333;
	}
	.bot_name{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}
	.bot_time{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 11rpx;
	}
	.ling{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #DE2415;
	}
	.shouyi{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 11rpx;
	}
	.wu{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 36rpx;
	}
	.hengxian{
		background-size: 100% 100%;
		width: 97rpx;
		height: 1rpx;
		background-image: url('/static/image/fenxiao25.png');
	}
	.gengduo{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-left: 37rpx;
		margin-right: 37rpx;
	}
</style>
